<!DOCTYPE html>
<html lang="ch">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>xusu</title>

    <!--favicon-img--> 
        <link rel="icon" type="image/png" href="images/log.png">
    <!--favicon-img-->

    <!-- SWIPER CSS LINK -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/css/swiper.min.css" integrity="sha256-DBYdrj7BxKM3slMeqBVWX2otx7x4eqoHRJCsSDJ0Nxw=" crossorigin="anonymous"/>
    <!-- SWIPER CSS LINK -->
    
    <!-- GSAP JS LINK -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/gsap.min.js"></script>
    <!-- GSAP JS LINK -->

    <!-- CSS LINK -->
    <link rel="stylesheet" href="css/style.css">
    <!-- CSS LINK -->


</head>
<body>

    <!-- ALL CONTENTS -->

    <main id="all">


        <!--------------- LOADER--------------

        <div id="loader">
            <div class="loader-text-stroke"> XU&nbsp;SU
                <div class="loader-text"> XU&nbsp;SU </div>
            </div>

        </div>

        --------------- LOADER --------------->



        <!-- BREAKER (SCREEN THAT DISPLAYS ON LINKS CLICK) -->

        <div id="breaker">
        </div>


        <!-- BREAKER (SCREEN THAT DISPLAYS ON LINKS CLICK) -->




        <!--------------- CURSOR --------------->
        <div class="cursor"></div>
        <div class="cursor-two"></div>
        <!-- -------------CURSOR --------------->



        <!-- NAVIGATION CONTENT -->

        <div id="navigation">

            <!-- LOGO -->
            <div class="logo hover navigation-opacity"> <a href="#home" class="page-link">  XUSU  </a></div>
            <!-- LOGO -->

            <!-- NAVIGTAION CLOSE -->
            <div class="navigation-close hover navigation-opacity">
                <div class="navigation-close-line"></div>
                <div class="navigation-close-line"></div>
            </div>
            <!-- NAVIGTAION CLOSE -->


            <!-- NAVIGATION LINKS -->
            <div class="navigation-links">
                <ul>
                    <li class="navigation-opacity"><a href="#home" class="page-link hover">主页</a></li>
                    <li class="navigation-opacity"><a href="#about" class="page-link hover">关于</a></li>
                    <li class="navigation-opacity"><a href="#gallery" class="page-link hover">相册</a></li>
                    <!--未开发页面
                    <li class="navigation-opacity"><a href="#contact" class="page-link hover">Contact</a></li>
                    -->
                </ul>
            </div>
            <!-- NAVIGATION LINKS -->


            <!-- SOCIAL MEDIA LINKS -->

            <div class="social-media-links">
                <ul>
                    <li class="navigation-opacity"><a href="#" class="hover"></a></li>
                    <li class="navigation-opacity"><a href="#" class="hover"></a></li>
                    <li class="navigation-opacity"><a href="#" class="hover"></a></li>
                </ul>
            </div>

            <!-- SOCIAL MEDIA LINKS -->

        </div>

        <!-- NAVIGATION CONTENT -->



        <!--------------------- HOME PAGE --------------------->

        <div id="home">

            <!-- HOME CONTENTS -->

            <div id="home-contents">



                <!-- NAVIGATION BAR -->
                <div class="navigation-bar">

                    <!-- LOGO -->
                    <div class="logo"> <a href="#home" class="page-link hover">  xusu  </a></div>
                    <!-- LOGO -->


                    <!-- MENUBAR -->
                    <div class="menu-bar hover">
                        <div class="menu-bar-text">
                          <a href="#">导航</a>
                        </div>

                        <div class="menu-bar-line-container">
                            <span class="menu-bar-line"></span>
                            <span class="menu-bar-line"></span>
                        </div>

                    </div>
                    <!-- MENUBAR -->

                </div>
                <!-- NAVIGATION BAR -->






                <!-- SLIDER -->
                <div class="swiper-container parallax-slider">
                    <div class="swiper-wrapper">


                        <!-- IMAGE -->
                        <div class="swiper-slide">
                            <div class="img-container">
                               <a href="#gallery" class="page-link">
                                <img src="images/pic-architecture-two.jpg" alt="portrait-main-image" class="home-images"> <!--INSERT YOUR IMAGE HERE-->
                               </a>
                            </div>
                            <div class="image-type">建筑设计</div>
                        </div>
                        <!-- IMAGE -->
                        
                        <!-- IMAGE -->
                        <div class="swiper-slide">
                            
                            <div class="img-container">
                                <a href="#gallery" class="page-link ">
                                <img src="images/zuoping/xuanguan_small.webp" alt="wedding-main-image" class="home-images"> <!--INSERT YOUR IMAGE HERE-->
                                </a>
                            </div>
                            <div class="image-type">软件下载</div>
                        </div>
                        <!-- IMAGE -->
                        
                        <!-- IMAGE -->
                        <div class="swiper-slide">
                            <div class="img-container">
                                <a href="#gallery" class="page-link">
                                <img src="images/zuoping/model.webp" alt="advertising-main-image" class="home-images"> <!--INSERT YOUR IMAGE HERE-->
                                </a>
                            </div>
                            <div class="image-type">模型场景</div>
                        </div>
                        <!-- IMAGE -->
                        
                        <!-- IMAGE -->
                        <div class="swiper-slide">
                            <div class="img-container">
                                <a href="#gallery" class="page-link">
                                <img src="images/places-pic-s.jpg" alt="nature-main-image" class="home-images"> <!--INSERT YOUR IMAGE HERE-->
                                </a>
                            </div>
                            <div class="image-type">知识分享</div>
                        </div>
                        <!-- IMAGE -->
                                               
                    </div>


                 <!-- PAGINATION -->

                <div class="swiper-pagination">
                    
                </div>

                <!-- PAGINATION -->


                </div>
                <!-- SLIDER -->


                <!-- ABOUT LINK -->
                <div class="about-link hover">
                 <a href="#about" class="hover page-link">
                    关于
                 </a> 
                </div>
                <!-- ABOUT LINK -->


            </div>


            <!-- HOME CONTENTS --->


        </div>

        <!--------------------- HOME PAGE --------------------->





        <!-------------------- ABOUT PAGE  ------------------->


        <div id="about">



            <!-- ABOUT CONTENTS -->
            <div id="about-contents">

                <!-- NAVIGATION BAR -->
                <div class="navigation-bar">

                    <!-- LOGO -->
                    <div class="logo"> <a href="#home" class="page-link hover">  XUSU  </a></div>
                    <!-- LOGO -->


                    <!-- MENUBAR -->
                    <div class="menu-bar hover">
                        <div class="menu-bar-text">
                          <a href="#">导航</a>
                        </div>

                        <div class="menu-bar-line-container">
                            <span class="menu-bar-line"></span>
                            <span class="menu-bar-line"></span>
                        </div>

                    </div>
                    <!-- MENUBAR -->

                </div>
                <!-- NAVIGATION BAR -->




            <!-- ABOUT MAIN CONTENTS -->

            <div class="about-main-contents">




                <!-- ABOUT IMAGE -->
                <div class="about-image">
                    <div class="about-img-container">
                        <div class="about-image-back"></div>
                        <img src="images/about-image.webp" alt="about image">  <!--ADD YOUR IMAGE HERE-->
                    </div>
                </div>
                <!-- ABOUT IMAGE -->

                
                 <!-- ABOUT INFO -->
                 <div class="about-info">

                    <div class="heading">
                    徐溯
                    </div>

                   <div class="paragraph">
                    佛系
                    <hr>
                    图纸绘制，制作效果图，3d场景制作....（额....暂时就想到这么多）
                   </div>

                   <div class="paragraph">
                    掌握的软件：Autocad等一系列cad软件，Blender3d建模，Pr视频剪辑，Photoshop，Affinity Photo照片编辑，Office（正在学习AE）

                   </div>

                   <div class="about-call-to-action">

                   </div>

                   <div class="cv-button">
                    <a href="https://space.bilibili.com/1909791946?spm_id_from=333.337.search-card.all.click" class="hover">B站</a>
                  </div>

                </div>
                
                <!-- ABOUT INFO -->


            </div>


            <!-- ABOUT MAIN CONTENTS -->


            
        </div>
        <!-- ABOUT CONTENTS -->


        </div>

        <!-------------------- ABOUT PAGE  ------------------->





        <!-------------------- GALLERY PAGE  ------------------->

        <div id="gallery">

            <!-- GALLERY CONTENT -->
            <div id="gallery-content">

                <!-- NAVIGATION BAR -->
                <div class="navigation-bar">

                    <!-- LOGO -->
                    <div class="logo"> <a href="#home" class="page-link hover"> xusu </a></div>
                    <!-- LOGO -->


                    <!-- MENUBAR -->
                    <div class="menu-bar hover">
                        <div class="menu-bar-text">
                          <a href="#">导航</a>
                        </div>

                        <div class="menu-bar-line-container">
                            <span class="menu-bar-line"></span>
                            <span class="menu-bar-line"></span>
                        </div>

                    </div>
                    <!-- MENUBAR -->

                </div>
                <!-- NAVIGATION BAR -->



                <!-- GALLERY HEADER CONTENTS -->

                <div class="gallery-header-content">


                <!-- IMAGE SELECTION BUTTONS -->
                <div class="image-selector">
                    <a href="#" class="image-sort-button hover active" data-sort="all">所有</a>
                    <a href="#" class="image-sort-button hover" data-sort="building">建筑</a>
                    <a href="#" class="image-sort-button hover" data-sort="model">模型</a>
                    <a href="#" class="image-sort-button hover" data-sort="shot">拍摄</a>
                </div>
                <!-- IMAGE SELECTION BUTTONS -->

                </div>

                <!-- GALLERY HEADER CONTENTS -->



                <!-- IMAGES CONTAINER -->
                <div class="gallery-images-container">

                <!-- GRID CONTAINER -->
                    <div class="gallery-grid">


                        <!-- COLUMN -->
                        <div class="column">
                            <img src="images/zuoping/jiudian.png" alt="building" class="gallery-img"> 
                        </div>
                        <!-- COLUMN -->

                        <!-- COLUMN -->
                        <div class="column">
                            <img src="images/zuoping/1.png" alt="building" class="gallery-img"> 
                        </div>
                        <!-- COLUMN -->

                        <div class="column">
                            <img src="images/zuoping/武直10-渲染.png" alt="building" class="gallery-img"> 
                        </div>

                        <!-- COLUMN -->
                        <div class="column">
                        <img src="images/3d/第七届渲染.png" alt="building" class="gallery-img"> 
                        </div>
                        <!-- COLUMN -->

                        <!-- COLUMN -->
                        <div class="column">
                        <img src="images/shot/1.jpg" alt="shot" class="gallery-img"> 
                        </div>
                        <!-- COLUMN -->

                        <!-- COLUMN -->
                        <div class="column">
                        <img src="images/shot/7.jpg" alt="shot" class="gallery-img"> 
                        </div>
                        <!-- COLUMN -->
                        
                        <!-- COLUMN -->
                        <div class="column">
                        <img src="images/shot/3.jpg" alt="shot" class="gallery-img"> 
                        </div>
                        <!-- COLUMN -->

                        <!-- COLUMN -->
                        <div class="column">
                            <img src="images/shot/4.jpg" alt="shot" class="gallery-img"> 
                            </div>
                            <!-- COLUMN -->

                        <!-- COLUMN -->
                        <div class="column">
                            <img src="images/shot/5.jpg" alt="shot" class="gallery-img"> 
                            </div>
                            <!-- COLUMN -->
                        
                        <!-- COLUMN -->
                        <div class="column">
                            <img src="images/shot/6.jpg" alt="shot" class="gallery-img"> 
                            </div>
                            <!-- COLUMN -->

                        <!-- COLUMN -->
                        <div class="column">
                            <img src="images/shot/8.jpg" alt="shot" class="gallery-img"> 
                            </div>
                            <!-- COLUMN -->

                        




                    </div>
                <!-- GRID CONTAINER -->


                </div>
                <!-- IMAGES CONTAINER -->

                <div class="copyright">
                    All Images © 2020-2023 Arlo Brown
                </div>


            </div>
            <!-- GALLERY CONTENT -->



        </div>

        <!-------------------- GALLERY PAGE  ------------------->


        <!-------------------- CONTACT PAGE  -------------------->

        <div id="contact">


            <!-- CONTACT CONTENT -->
            <div id="contact-content">



            <!-- NAVIGATION BAR -->
            <div class="navigation-bar">

                <!-- LOGO -->
                <div class="logo"> <a href="#home" class="page-link hover">xusu</a></div>
                <!-- LOGO -->


                <!-- MENUBAR -->
                <div class="menu-bar hover">
                    <div class="menu-bar-text">
                      <a href="#">导航</a>
                    </div>

                    <div class="menu-bar-line-container">
                        <span class="menu-bar-line"></span>
                        <span class="menu-bar-line"></span>
                    </div>

                </div>
                <!-- MENUBAR -->

            </div>
            <!-- NAVIGATION BAR -->


            <div class="contact-heading">
                关于我
            </div>


        <!-- CONTACT FLEX -->

        <div class="contact-flex">

            <!-- CONTACT FORM CONTAINER -->
            <div class="contact-form-container">


                <form action="mail.php">

                <!-- CONTACT FORM HEADING -->
                <div class="contact-form-heading">
                    填写你的个人信息
                </div>
                <!-- CONTACT FORM HEADING -->

                    <input type="text" id="name" placeholder="Name" class="hover" required>
                    <input type="email" id="email" placeholder="Email" class="hover" required>
                    <input type="text" id="subject" placeholder="Reason for Contact" class="hover" required>
                    <textarea name="textarea" id="body" placeholder="Message" class="hover" required></textarea>

                    <button type="button" id="submit" class="hover">发送</button>
                    <div id="message">INVALID EMAIL</div>

                </form>
                
            </div>
            <!-- CONTACT FORM CONTAINER -->


            <div class="contact-info">

                <div class="contact-info-content">
                   <span class="highlight"> 地址<br></span>
                   XXXXXXXXXXXXXXX
                </div>

                <div class="contact-info-content">
                    <span class="highlight">邮箱<br></span>
                    xtf2018@outlook.com<br>
                 <u><a href="mailto:xtf2018@outlook.com" class="hover">xtf2018@outlook.com</a></u> 
                </div>

                <div class="contact-info-content">
                    <span class="highlight">Social<br></span>
                    
                </div>

            </div>

        </div>

            <!-- CONTACT FLEX -->




            </div>

            <!-- CONTACT CONTENT -->

            
        </div>

        <!-------------------- CONTACT PAGE  -------------------->


        
        

    </main>

    <!-- ALL CONTENTS -->

    <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/js/swiper.min.js" integrity="sha256-4sETKhh3aSyi6NRiA+qunPaTawqSMDQca/xLWu27Hg4=" crossorigin="anonymous"></script>
    <script src="js/jquery.min.js"></script>
    <script src="js/masonry.min.js"></script>
    <script src="js/jquery.lettering.js"></script>
    <script src="js/index.js"></script>
    

</body>
</html>